<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
    <style>
        *{
            margin: 0 ;
            padding: 0;
        }
        body{
            box-sizing: border-box;
        }
        table,tr,th,td{
            border: 1px solid slateblue;
            width: 830px;
            height: 30px;
        }
        #shuru{
            margin-top: 30px;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
<div id="app">
<div id="shuru">
    <lable>id
    <input type="text" id="inputId" v-model="id"></lable>
    <lable >name
    <input type="text" id="inputNname" v-model="name"></lable>
    <button v-on:click="addtian">添加品牌</button>
    <lable>搜索名称关键字
        <input type="text" v-model="keywords">
    </lable>
</div>

    <table>
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>ctime</th>
            <th>del</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            id:"",
            name:"",
            keywords:"",
            list:[
                {id:1,name:"奔驰",ctime:new Date()},
                {id:2,name:"宝马",ctime:new Date()}
            ]


        },
        methods:{
            addtian(){
                if(this.id && this.name){
                    var obj={id:this.id,name:this.name,ctime:new Date()}
                    this.list.push(obj)
                    this.id=this.name=""
                }

            },
            del(id){
                var index=this.list.findIndex(item =>{
                    if(this.id==id){
                        return true;
                }
                })
                this.list.splice(index,1)
            },
            search(keywords){
                var newList = this.list.filter(item =>{
                    if(item.name.includes(keywords)){
                    return item
                }
                })
                return newList
            }

            //     //根据关键字进行数据的搜索
            //     var newList=[]
            //     this.list.forEach(item =>{
            //         if(item.name.indexOf(keywords) != -1){
            //             newList.push(item)
            //     }
            //     }),
            //     return newList
            // }
            //     this.list.filter(item =>{
            //         // if(item.name.indexOf(keywords) !=-1)
            //         if(item.name.includes(keywords))
            //     {
            //         newList.push(item)
            //     }
            //     }
            //     }

        }
    })

    //过滤器
    // Vue.filter("过滤器名称"，function () {
    //
    // })
</script>

</body>
</html>